<template>
  <div class="common-layout">
    <el-container>
      <el-header class="head">
        <el-row style="width: 100%">
          <!-- 添加点击事件和动态样式 -->
          <el-col :span="5" class="order-col"
                  :class="{ 'active': activeTab === 'all' }"
                  @click="switchTab('all')">
            全部订单
          </el-col>
          <el-col :span="5" class="order-col"
                  :class="{ 'active': activeTab === 'unpaid' }"
                  @click="switchTab('unpaid')">
            待付款
          </el-col>
          <el-col :span="5" class="order-col"
                  :class="{ 'active': activeTab === 'unsent' }"
                  @click="switchTab('unsent')">
            待发货
          </el-col>
          <el-col :span="5" class="order-col"
                  :class="{ 'active': activeTab === ' unreceived' }"
                  @click="switchTab('unreceived')">
            待收货
          </el-col>
          <el-col :span="4" class="order-col"
                  :class="{ 'active': activeTab === 'unevaluated' }"
                  @click="switchTab('unevaluated')">
            待评价
          </el-col>
        </el-row>
      </el-header>
      <el-main style="width: 100%">
        <el-table
            :data="filteredOrderList"
            border
            style="width: 100%"
            :header-cell-style="{ display: 'none' }"
            fit
        >
          <el-table-column
              label="订单信息"
              align="left"
          >
            <template #default="scope">
              <div class="order-header">
                <!-- 修复：恢复插值语法 {{ }} -->
                <span class="order-date">{{ scope.row.createTime }}</span>
                <span class="order-id">订单号: {{ scope.row.orderId }}</span>
                <span class="shop-name">{{ scope.row.shopName }}</span>
                <a class="order-detail" href="javascript:;">订单详情</a>
                <span class="trade-status" v-if="scope.row.status === 0" :style="{ color: scope.row.tradeStatusColor }">待付款</span>
                <span class="trade-status" v-else-if="scope.row.status === 1" :style="{ color: scope.row.tradeStatusColor }">待发货</span>
                <span class="trade-status" v-else-if="scope.row.status === 2" :style="{ color: scope.row.tradeStatusColor }">待收货</span>
                <span class="trade-status" v-else-if="scope.row.status === 3" :style="{ color: scope.row.tradeStatusColor }">待评价</span>
                <span class="trade-status" v-else-if="scope.row.status === 4" :style="{ color: scope.row.tradeStatusColor }">交易完成</span>
              </div>
              <div class="product-info">
                <img :src="scope.row.productImg" class="product-img" />
                <div class="product-desc">
                  <p class="product-name">{{ scope.row.name }}</p>
                  <p class="product-spec">{{ scope.row.sku }}</p>
                  <p class="service-tags">
                    <span v-for="(tag, index) in scope.row.serviceTags" :key="index">{{ tag }} </span>
                  </p>
                  <div class="product-actions">
                    <el-button type="text" size="small">加入购物车</el-button>
                    <el-button type="text" size="small">申请售后</el-button>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
              label="价格信息"
              align="right"
              width="200"
          >
            <template #default="scope">
              <div class="price-info">
                <!-- 修复：恢复插值语法 {{ }} -->
                <p>¥{{ scope.row.price }} <del>¥{{ scope.row.originalPayment }}</del></p>
                <p>数量：{{ scope.row.count }}</p>
                <p>实付款 ¥{{ scope.row.actualPayment }}</p>
                <p><el-button type="text" size="small">{{ scope.row.orderType }}</el-button></p>
              </div>
            </template>
          </el-table-column>

          <el-table-column
              label="操作"
              align="right"
              width="180"
          >
            <template #default="scope">
              <el-button class="buttonOne" v-if="scope.row.status>=3" size="small">再买一单</el-button>
              <div class="more-actions">
                <el-button type="text" v-if="scope.row.status>=4" class="buttonTwo">加入购物车</el-button>
                <el-button type="text" v-if="scope.row.status==2" size="small" class="buttonTwo"  @click="LookWl(scope.row)">查看物流</el-button>
                <el-button type="text" v-else-if ="scope.row.status<=0"class="buttonTwo">去付款</el-button>
                <el-button type="text" size="small" class="buttonTwo" v-if="scope.row.status==3">去评价</el-button>
                <el-button type="text" size="small" class="buttonTwo" v-else-if="scope.row.status==4">追加评价</el-button>
                <el-button type="text" class="buttonTwo"  v-if="scope.row.status>=3" @click="deleteOrder(scope.row.odId)" size="small">{{scope.row.odId}}删除订单</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { AuthService } from '../../service/auth.ts'
import router from "../../router";
import MyWuLiu from "../logistics/MyWuLiu.vue";
const authService = new AuthService()



// 定义订单数据接口
interface OrderItem {
  createTime: string
  orderId: string
  shopName: string
  status: number
  tradeStatusColor: string
  productImg: string
  name: string
  sku: string
  serviceTags: string[]
  price: number
  originalPayment: number
  actualPayment: number
  orderType: string
  count: number
  odId: number
}

const userId = ref(authService.getUserId())
const orderList = ref<OrderItem[]>([])
const activeTab = ref('all') // 当前激活的tab

// 根据当前tab过滤订单数据
const filteredOrderList = computed(() => {
  if (activeTab.value === 'all') {
    return orderList.value
  }

  switch (activeTab.value) {
    case 'unpaid': // 待付款
      return orderList.value.filter(item => item.status === 0)
    case 'unsent': // 待发货
      return orderList.value.filter(item => item.status === 1)
    case 'unreceived': // 待收货
      return orderList.value.filter(item => item.status === 2)
    case 'unevaluated': // 待评价
      return orderList.value.filter(item => item.status === 3)
    default:
      return orderList.value
  }
})

// 切换tab
const switchTab = (tab: string) => {
  activeTab.value = tab
}
const LookWl=(scope)=>{
  console.log(scope);
  router.push({
    name:"MyWuLiu",
    params:{
      productId:scope.id,
      orderId:scope.orderId
    }
      })

}
const doOrder = async () => {
  try {
    const { data } = await axios.get(`/api/order/ordertb/get-by-user/${userId.value}`)
    orderList.value = data
    console.log(data)
  } catch (error) {
    console.error('获取订单数据失败:', error)
  }
}

const deleteOrder = async (odId: number) => {
  try {
    const { data } = await axios.delete(`/api/order/OrderDetails/delete`, {
      params: {
        id: odId
      }
    })

    if (data === true) {
      doOrder()
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  } catch (error) {
    ElMessage.error('删除失败: ' + error.message)
  }
}

onMounted(doOrder)
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.head {
  display: flex;
}

.order-col {
  text-align: center;
  line-height: 50px;
  font-size: 25px;
  border-radius: 4px;
  transition: all 0.3s;
  cursor: pointer;
}

.order-col:hover {
  color: #FF4400;
  transform: scale(1.02);
}

/* 添加激活状态样式 */
.order-col.active {
  color: #FF4400;
  font-weight: bold;
  background-color: #fff5f0;
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: #666;
  gap: 8px;
}

.order-date {
  margin-right: 16px;
}

.order-id {
  font-weight: 500;
  margin-right: 16px;
}

.shop-name {
  color: #ff4040;
  margin-right: 8px;
}

.order-detail {
  color: #409eff;
  margin-right: 16px;
  text-decoration: none;
}

.trade-status {
  font-weight: 500;
}

.product-info {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
}

.product-img {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  flex-shrink: 0;
}

.product-desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.product-spec {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.service-tags {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.product-actions {
  display: flex;
  gap: 8px;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  color: #333;
}

.price-info del {
  color: #999;
  margin-left: 4px;
}

.more-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 50px;
  color: red;
}

@media (max-width: 768px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-detail,
  .trade-status {
    align-self: flex-end;
  }
}
.buttonOne{
  background-color: #FF4400;
  font-size: 15px;
  height: 30px;
  width: 120px;
  color: white;
  border-radius: 10px;
}
.buttonTwo{
  font-size: 15px;
  color: #FF4400;
}

</style>
